<template>
	<view class="pages">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false" class="fixed">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<map :id='myMap' class="map" :style="{height:mapH*0.4+'px'}" :longitude="orgin.longitude" :latitude="orgin.latitude"
			:scale="scale" :markers="markers" :polyline="polyline" @controltap='controltap' @regionchange='regionchange'
			show-location>


		</map>
		<scroll-view scroll-y="true" :style="{height:mapH*0.58+'px'}" v-if="shoplist">
			<view class="inro-card" v-for="(item,index) in shoplist" @click="selectShop(index)" >
				<view class="flex  s-item-head   ">
					<view class="cu-avatar radius lg" :style="{backgroundImage:'url('+item.logo+')'}">
                        
					</view>
		
					<view class="item-bottom  flex flex-direction  justify-around">

						<view class="text-cut text-bold">{{item.shop_name || ""}} </view>
						<view class="text-cut text-gray text-over">{{item.distance || ""}} | {{item.address || ""}}</view>

					</view>

					<view class="middle">
						<text class="cuIcon-right text-gray"></text>
					</view>

				</view>

			</view>

		</scroll-view>
		 
		<view class="text-gray middle basis-xll margin-top" v-else>
			~暂无店铺~
		</view>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				show: true,
				title: '选择店铺',
				myMap: 'myMap',
				mapCtx: {},
				mapH: 0,
				markers: [], //单车数组
				//缩放比
				scale: 18,
				// 记录上一次的经纬度
				//绘制线路的数组
				polyline: [],
				distanceArr: [],
				info: {
					kilo: "0.00",
					time: "00:00:00",
					heat: "0.00",
					status: false,
					speed: {
						x: 0,
						y: 0,
						z: 0,
						speedNum: 0, //加速度
					},
					steps: 0,
					maker_num: 0
				},
				orgin:{
					latitude:0,
					longitude:0
					
				},//当前位置
				route: [],
				timer: {},
				shoplist: []

			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中..."
			})
		},
		onReady() {
			this.mapCtx = uni.createMapContext(this.myMap, this);
			let userinfo=uni.getStorageSync("userInfo");
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.orgin.latitude = res.latitude;
					this.orgin.longitude = res.longitude;
					let arr = {
						id: 1,
						width: 50,
						height: 50,
						latitude: res.latitude,
						longitude: res.longitude,
						iconPath: userinfo.headimgurl,
						title: "我的位置"
					}
					this.markers.push(arr);
					this.getPrintShop();
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("获取位置失败")
				}
			})
		},
		mounted() {

		
			this.mapH = this.WH;


		},
		methods: {
			getDistance(latlng1, latlng2) {
			    let lat1 = latlng1.latitude;
			    let lng1 = latlng1.longitude;
			    let lat2 = latlng2.latitude;
			    let lng2 = latlng2.longitude;
			    var radLat1 = (lat1 * Math.PI) / 180.0;
			    var radLat2 = (lat2 * Math.PI) / 180.0;
			    var a = radLat1 - radLat2;
			    var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			    s = s * 6378.137; // EARTH_RADIUS;
			    s = Math.round(s * 10000) / 10000;
				(s>1000)?(()=>{
					s=s.toFixed(1)+"km";
				})():(()=>{
					s=(s*1000).toFixed(1)+"m"
				})();
			    return s;
			},
			

			/**
			 * 获取商铺
			 */
			getPrintShop() {
				this.apiRequest('/buyer/printShops', {
					area_id: uni.getStorageSync('area_id'),
				}, 0, "POST").then(res => {
				
					if (res.code == 200) {
						
						for(let i in res.data){
							let arr = {
								id: 1,
								width: 50,
								height: 50,
								latitude: res.data[i].latitude,
								longitude: res.data[i].longitude,
								iconPath: res.data[i].logo,
								title: ""
							}
							this.markers.push(arr);
							let dat={
								latitude: res.data[i].latitude,
								longitude: res.data[i].longitude,
							}
							res.data[i].distance=this.getDistance(this.orgin,dat);
							console.log("res.data[i].distance"+res.data[i].distance);
							
							
						}
						this.shoplist = res.data;
					}

				}).catch(() => {
					uni.stopPullDownRefresh()
					this.mescroll.endErr();
				})


			},
			selectShop(index) {
				let page = getCurrentPages();
				let beforePage = page[page.length - 2];
				let res={
					distance:this.shoplist[index].distance,
					shop_name:this.shoplist[index].shop_name,
					address:this.shoplist[index].address,
					shop_id:this.shoplist[index].shop_id,
					logo:this.shoplist[index].logo
				}
				beforePage.$vm.selectShop(res);
				uni.navigateBack({
					delta: beforePage
				})
			},

			close() {
				this.show = false;
			},

			statrt() {
				console.log("status" + this.info.status);
				(this.info.status) ? (() => {
					this.info.status = false;
				})() : (() => {
					this.info.status = true;
				})();

			},
			/**
			 * 移动地图的视野事件
			 */
			regionchange(e) {
				console.log("mover map");
				this.mapCtx.getCenterLocation({
					type: 'gcjo2',
					success: (res) => {
						if (e.type == "begin") {
							this.latitude = res.latitude;
							this.longitude = res.longitude;
							this.polyline = [];

						} else {
							let lon_distance = res.longitude - this.longitude;
							let lat_distance = res.latitude - this.latitude;

							if (Math.abs(lon_distance) >= 0.005 || Math.abs(lat_distance) >= 0.001) {
								this.markers = [];
								this.tocreate(res);
							}

						}

					}
				})



			},




			/**
			 * 模拟数据
			 * @param {Object} res
			 */
			tocreate(res) {
				let markers = this.markers;
				let ran = Math.ceil(Math.random() * 20 + 5);
				for (let i = 0; i < ran; i++) {
					let bic = {
						id: 0,
						iconPath: this.resDomain + "/Offer/static/enter.png",
						callout: {},
						latitude: 0,
						longitude: 0,
						width: 50,
						height: 30

					}
					// 随机
					var sign_a = Math.random();
					var sign_b = Math.random();
					// 单车分布密集度设置
					var a = (Math.ceil(Math.random() * 99)) * 0.00002;
					var b = (Math.ceil(Math.random() * 99)) * 0.00002;
					bic.id = i;
					bic.longitude = (sign_a > 0.5 ? res.longitude + a : res.longitude - a);
					bic.latitude = (sign_b > 0.5 ? res.latitude + b : res.latitude - b);
					markers.push(bic);
				}
				this.markers = markers;


			}

		}





	}
</script>
<style scoped>
	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.map-icon_point {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-top: -40rpx;
		width: 52rpx;
		height: 75rpx;
	}

	.map-box {
		width: 50upx;
		height: 100upx;
		background-color: #007AFF;
	}
</style>

<style lang="scss">
	.map-box-right {
		right: 750*0.02upx;
	}

	.item-bottom {
		margin-left: 20rpx;
		width: 750*0.92-60-96rpx;
	}
</style>
